<!--  -->
<template>
  <div class="table-box">
    <el-card v-if="isSearch" class="search-box">
      <slot name="search" :params="params" :search="search"></slot>
    </el-card>
    <el-card>
    <div>
      <slot name="buttons" :delAll="delAll"></slot>
    </div>

    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        v-for="(item, index) in columns"
        :width="item.width"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      >
        <template v-if="item.slot" #default="scope">
          <slot :name="item.prop" :del="del" :row="scope.row"></slot>
        </template>

<!-- 图片预览列 -->
        <template v-if="item.imgPreview" #default="scope">

            <el-image
      style="width:50px; height: 50px"
      :src="imgUrl+scope.row[item.prop]"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="[imgUrl+scope.row[item.prop]]"
      show-progres
      :initial-index="4"
      fit="cover"
      preview-teleported
    />
 
        </template>

      </el-table-column>

      <!-- <el-table-column prop="date" label="时间" width="180" />
<el-table-column prop="name" label="姓名" width="180" />

<el-table-column prop="address" label="地址">
    <template #default="scope">
      {{ scope.row.address }}
    </template>
</el-table-column> -->
    </el-table>

    <el-pagination class="pagination"
      v-if="props.isPage"
      v-model:current-page="params.page"
      v-model:page-size="params.pageSize"
      :page-sizes="pageSizes"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, ref } from "vue";
const imgUrl=import.meta.env.VITE_IMG_URL;
const total = ref(0);

const handleSizeChange = (val: number) => {
  params.pageSize = val;
  getData();
};
const handleCurrentChange = (val: number) => {
  params.page = val;
  getData();
};

//请求参数
const params = reactive<any>({
  page: 1,
  pageSize: 10,
});

export interface ColumnType {
  prop: string,
  label: string,
  slot?: boolean,
  width?: string,
  imgPreview?:boolean

}

const tableData = ref<any>([]);

export interface TableType {
  delelte?: (id:number)=>void;
  delelteAll?: Function;
  loadData: Function;
  columns: Array<ColumnType>;
  isPage?: boolean;
  pageSizes?: number[];
  isSearch?:boolean
}

const props = withDefaults(defineProps<TableType>(), {
  delelteAll: () => () => {},
  delelte: () => () => {},
  loadData: () => () => {},
  columns: () => [],
  isPage: true,
  isSearch: true,
  pageSizes: () => [10, 30, 50, 100, 200, 300, 400],
});

//请求数据接口
const getData = async () => {

  
  const data: any = await props.loadData(params);
  tableData.value = data.list;
  total.value = data.counts;
  console.log("子组件调用返回数据:", data.list);
};
getData();

const addReload=()=>{

  console.log("重新调节课");
  

  params.page=1;
  getData();

}

//搜索方法
const search = () => {
  params.page = 1;
  getData();
};
//删除单条数据
const del = (id: number) => {
  ElMessageBox.confirm("确定要删除此条数据吗?")
    .then(async () => {
      await props.delelte(id);
      getData();
    })
    .catch(() => {
      // catch error
    });
};

//批量删除单条数据
const delAll = () => {
    if (multipleSelection.value.length == 0) {
      ElMessage.error("请选择要删除的数据");
      return;
    }
 
  ElMessageBox.confirm("确定要删除选中的数据吗?")
    .then(async () => {

         //得到选中数据的id
        let ids= multipleSelection.value.map((item: any) => item.id);
      await props.delelteAll(ids);
      getData();
    })
    .catch(() => {
      // catch error
    });
};
//选择数据

const multipleSelection = ref<any>([]);

const handleSelectionChange = (val: any[]) => {
  console.log("选择数据", val);

  multipleSelection.value = val;
};

const title=ref("hello");

defineExpose({title,addReload});
</script>
<style scoped>
 .table-box{
    
    padding:10px;
}
.search-box{
    margin-bottom: 10px;
}
.pagination{
    display: flex;
    justify-content: center;
    margin-top:30px;
}
</style>
